<template>
    <div>
        <div>
            <Breadcrumb name1="后台管理" name2="企业管理"></Breadcrumb>
            <el-card>
                <div class="search">
                    <div class="search-up">
                        <span>搜索</span>
                        <el-button @click="addDialog=true" style="border: 1px solid #0846B9;color:#0846B9">+新增</el-button>
                    </div>
                    <div class="i"><i class="el-icon-caret-top"></i></div>
                    <div class="search-down">
                        <span>企业名称:</span>
                        <el-input class="search-input" v-model="searchKeyword" clearable size="mini"></el-input>
                       <div class="search-down-btn">
                            <el-button size="small" @click="search" style="color:white;background-color: #0846B9">搜索</el-button>
                            <el-button size="small" @click="resetsearch" style="border: 1px solid #0846B9;color:#0846B9">重置</el-button>
                        </div>
                    </div>
                </div>
                <div class="wrapper">
                    <!-- 表格 -->
                    <el-table :data="organizationList.slice((pageIndex-1)*pageSize,pageIndex*pageSize)" 
                    style="width: 100%" v-loading="loading">
                        <el-table-column type="index" label="序号" min-width="65" align="center"></el-table-column>
                        <el-table-column prop="organization_name" label="企业名称" min-width="260" align="center"></el-table-column>
                        <el-table-column prop="area_name" label="所属区域" min-width="260" align="center"></el-table-column>
                        <el-table-column prop="organization_creditcode" label="统一社会信用代码" width="180" align="center"></el-table-column>
                        <el-table-column label="操作" width="250" align="center">
                            <template slot-scope="scope">
                                <!-- 编辑本行数据，点击弹出编辑用户的对话框 -->
                                <el-button type="text"
                                    @click="updateDialogBtn(scope.row)">
                                    编辑
                                </el-button>
                                <!-- 删除本行数据 -->
                                <el-button type="text" @click="deleteDialog(scope.row.organization_id)">删除</el-button>

                                <el-button type="text" @click="DepartmentDialog(scope.row.organization_id)">部门管理</el-button>
                                <el-button type="text" @click="UserlistDialog(scope.row.organization_id)">人员管理</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 分页 -->
                    <div class="page">
                        <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="organizationInfo.pageIndex"
                            :page-sizes="[1, 2, 5, 10]"
                            :page-size="organizationInfo.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="totalRecords">
                        </el-pagination>
                    </div>
                </div>
            </el-card>
        </div>

        <!-- 添加企业的对话框 -->
        <el-dialog
            title="企业信息新增"
            :visible.sync="addDialog"
            width="50%"
            @close="addDialogClosed"
            :modal-append-to-body="false">
            <el-form :model="addOrganizationForm" :rules="OrganizationFormRules"
                ref="addOrganizationFormRef" label-width="150px">
                <el-form-item label="企业名称：" prop="organization_name">
                    <el-input v-model="addOrganizationForm.organization_name" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="所属区域：" prop="organization_area_id">
                    <el-select v-model="addOrganizationForm.organization_area_id" placeholder="请选择" size="mini">
                        <el-option v-for="(item,index) in arealist" :key="index" 
                        :label="item.area_name" :value="item.area_id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="统一社会信用代码：" prop="organization_creditcode">
                    <el-input v-model="addOrganizationForm.organization_creditcode" maxlength=18 size="mini"></el-input>
                </el-form-item>
                <el-form-item label="组织机构类型：" prop="organization_type">
                    <el-select v-model="addOrganizationForm.organization_type" placeholder="请选择" size="mini">
                        <el-option v-for="(item,index) in organization_type" :key="index"
                        :label="item.bs_name" :value="item.bs_id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属行业：" >
                    <el-select v-model="addOrganizationForm.industry_id" placeholder="请选择" size="mini">
                        <el-option v-for="(item,index) in industry_id" :key="index"
                        :label="item.industry_name" :value="item.industry_id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="企业规模：" prop="scale_id">
                    <el-select v-model="addOrganizationForm.scale_id" placeholder="请选择" size="mini">
                        <el-option v-for="(item,index) in scale_id" :key="index"
                        :label="item.bs_name" :value="item.bs_id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否为主账号：" prop="organization_fax">
                    <el-select v-model="addOrganizationForm.organization_fax" placeholder="请选择" size="mini">
                        <el-option label="是" value="1"></el-option>
                        <el-option label="否" value="2"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <!-- 确认取消事件 -->
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addOrganization">提交</el-button>
                <el-button @click="addDialog = false">取消</el-button>
            </span>
        </el-dialog>

        <!-- 编辑信息的对话框 -->
        <el-dialog
            title="企业信息编辑"
            :visible.sync="updateDialog"
            width="50%"
            :modal-append-to-body="false">
            <el-form :model="updateOrganizationForm" :rules="OrganizationFormRules"
                ref="updateOrganizationFormRef" label-width="150px">
                <el-form-item label="企业名称：" prop="organization_name">
                    <el-input v-model="updateOrganizationForm.organization_name"></el-input>
                </el-form-item>
                <el-form-item label="所属区域：" prop="organization_area_id">
                    <el-select v-model="updateOrganizationForm.organization_area_id" placeholder="请选择">
                        <el-option v-for="(item,index) in arealist" :key="index" 
                        :label="item.area_name" :value="item.area_id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="统一社会信用代码：" prop="organization_creditcode">
                    <el-input v-model="updateOrganizationForm.organization_creditcode" maxlength=18></el-input>
                </el-form-item>
                <el-form-item label="组织机构类型：" prop="organization_type">
                    <el-select v-model="updateOrganizationForm.organization_type" placeholder="请选择">
                        <el-option v-for="(item,index) in organization_type" :key="index"
                        :label="item.bs_name" :value="item.bs_id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属行业：" >
                    <el-select v-model="updateOrganizationForm.industry_id" placeholder="请选择">
                        <el-option v-for="(item,index) in industry_id" :key="index"
                        :label="item.industry_name" :value="item.industry_id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="企业规模：" prop="scale_id">
                    <el-select v-model="updateOrganizationForm.scale_id" placeholder="请选择">
                        <el-option v-for="(item,index) in scale_id" :key="index"
                        :label="item.bs_name" :value="item.bs_id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否为主账号：" prop="organization_fax">
                    <el-select v-model="updateOrganizationForm.organization_fax" placeholder="请选择">
                        <el-option label="是" value="1"></el-option>
                        <el-option label="否" value="2"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <!-- 确认取消事件 -->
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="updateOrganization">提交</el-button>
                <el-button @click="updateDialog = false">取消</el-button>
            </span>
        </el-dialog>

        <!-- 部门管理的对话框 -->
        <el-dialog
            title="部门管理"
            :visible.sync="departmentDialog"
            width="80%"
            append-to-body>
            <Department :f_organization_id="f_organization_id"></Department>
        </el-dialog>

        <!-- 人员管理的对话框 -->
        <el-dialog
            title="人员管理"
            :visible.sync="userlistDialog"
            width="80%"
            append-to-body>
            <Userlist :f_organization_id="f_organization_id"></Userlist>
        </el-dialog>
    </div>
</template>

<script>
import { request } from '../../../../api/axios'
import Breadcrumb from "../components/Breadcrumb.vue"
import Department from "./Department.vue"
import Userlist from "./Userlist.vue"

export default {
    name:"Organization",
    components:{ Breadcrumb,Department,Userlist },
    data(){
        return{
            // 获取企业列表的参数
            organizationInfo:{
                "ilist": [
                    {
                    "title": "string",
                    "content": "string"
                    }
                ]
            },
            // 分页
            pageIndex: 1,   //第几页
            pageSize: 10,   //一页几条
            // 获取到的企业列表数据
            organizationList:[],
            totalRecords:0,
            locallist:"",   //搜索事件时数据暂存至locallist中
            loading:true,

            // 搜索框输入的关键词
            searchKeyword:"",
            // 搜索结果
            searchResult:[],
            searchResultRecords:0,

            // 添加企业对话框的显示与隐藏
            addDialog:false,
            // 新增企业的参数
            addOrganizationForm:{
                organization_name: "",
                organization_area_id: "",
                organization_creditcode: "",
                organization_type: "",
                industry_id: "",
                organization_fax: "",
                scale_id: ""
            },
                // 请求来区域信息（getArea()事件获取）
                arealist:[],
                // 组织机构类型
                organization_type:[],
                // 所属行业
                industry_id:[],
                // 企业规模
                scale_id:[],

            // 编辑企业信息对话框的显示与隐藏
            updateDialog:false,
            // 编辑企业信息的表单数据
            updateOrganizationForm:{},

            // 要删除信息的id
            deleteorganization:{
                organization_id:""
            },

            // 部门管理对话框的显示与隐藏
            departmentDialog:false,
            userlistDialog:false,
            // 点击部门管理传给Department的organization_id
            f_organization_id:"",

            // 表单验证规则
            // 新增和编辑表单的规则
            OrganizationFormRules:{
                organization_name:[
                    {required:true,message:"请输入企业名称",trigger:"blur"},
                    {min:1,max:100,message:"长度在 1 到 100 个字符",trigger:"blur"}
                ],
                organization_area_id:[{required:true,message:"请选择所属区域",trigger:"blur"},],
                organization_creditcode:[
                    {required:true,message:"请输入统一社会信用代码",trigger:"blur"},
                    {min:18,max:18,message:"请输入格式正确的统一社会信用代码",trigger:"blur"}
                ],
                organization_type:[{required:true,message:"请选择组织机构类型",trigger:"blur"},],
                scale_id:[{required:true,message:"请选择企业规模",trigger:"blur"},],
                organization_fax:[{required:true,message:"请选择是否为主账号",trigger:"blur"},]
            }
        }
    },
    created(){
        this.getOrganizationList()
        this.getArea()
        this.getsomedata()
        this.getIndustry()
    },
    methods:{
        // 获取企业列表
        async getOrganizationList(){
            await request("post","/Organization_Info/GetEntInfo",this.organizationInfo)
            .then(res =>{
                console.log(res)
                this.organizationList=res.resultList
                this.totalRecords=res.totalRecords
                this.locallist=res.resultList
                this.loading=false
            })
        },

        // 搜索事件
        search(){
            this.organizationList=this.locallist
            this.searchResult=[]
            console.log(this.searchKeyword)
            for(let i=0;i<this.organizationList.length;i++){
                if(this.organizationList[i].organization_name.indexOf(this.searchKeyword) >-1){
                    this.searchResult.push(this.organizationList[i])
                    this.searchResultRecords+=1
                }
            }
            this.organizationList=this.searchResult
            this.totalRecords=this.searchResultRecords
        },
        // 重置搜索框
        resetsearch(){
            this.searchKeyword=""
            this.getOrganizationList()
        },

        // 增加企业事件
        async addOrganization(){
            await this.$refs.addOrganizationFormRef.validate(valid =>{
                // console.log(valid)  //valid返回一个true或false
                if(!valid) return
                request("post","/Organization_Info/InsertEntStatus",this.addOrganizationForm)
                .then(res =>{
                    console.log(res)
                    this.addDialog=false
                    this.getOrganizationList()
                    // 提示
                    if(res.result==1){
                        this.$message({
                            type: 'success',
                            message: res.resultDesc,
                        });
                    }
                    else{
                        this.$message({
                            type: 'warning',
                            message: res.resultDesc,
                        });
                    }
                }).catch(err=>{
                    console.log(err)
                })
            })
        },
            // 请求来区域信息
            getArea(){
                request("post","/Base_Area/GetStatus",this.organizationInfo)
                .then(res =>{
                    console.log("区域信息")
                    // console.log(res)
                    // console.log(res.resultList)
                    // console.log(res.resultList[0])
                    console.log(res.resultList[0].children)
                    this.arealist=res.resultList[0].children
                })
            },
            // 请求来其他新增所需数据
            getsomedata(){
                request("post","/Basic_Setting/GetStatus",this.organizationInfo)
                .then(res =>{
                    console.log(res)
                    // 组织机构类型数据提取
                    for(let i=0;i<res.resultList.length;i++){
                        if(res.resultList[i].bc_id==31){
                            this.organization_type.push(res.resultList[i])
                        }
                    }
                    console.log(this.organization_type)
                    // 企业规模数据提取
                    for(let i=0;i<res.resultList.length;i++){
                        if(res.resultList[i].bc_id==7){
                            this.scale_id.push(res.resultList[i])
                        }
                    }
                    console.log(this.scale_id)
                })
            },
            // 请求所属行业数据
            getIndustry(){
                request("post","/Industry/GetIndustryTree",this.organizationInfo)
                .then(res =>{
                    console.log(res)
                    this.industry_id=res.resultList
                })
            },

        // 关闭增加企业对话框
        addDialogClosed(){
            // 关闭对话框后重置里面内容
            this.$refs.addOrganizationFormRef.resetFields()
        },

        // 编辑事件对话框
        updateDialogBtn(info){
            this.updateDialog=true,
            console.log(info)
            this.updateOrganizationForm=info
        },
        // 点击提交编辑
        updateOrganization(){
            this.$refs.updateOrganizationFormRef.validate(valid =>{
                if(!valid) return
                request("post","Organization_Info/UpdateEntInfo",this.updateOrganizationForm)
                .then(res =>{
                    console.log(res)
                    this.updateDialog=false
                    this.getOrganizationList()
                    // 提示
                    if(res.result==1){
                        this.$message({
                            type: 'success',
                            message: res.resultDesc,
                        });
                    }
                    else{
                        this.$message({
                            type: 'warning',
                            message: res.resultDesc,
                        });
                    }
                })
            })
        },

        // 删除事件提示框
        deleteDialog(id) {
            this.$confirm('您确定要删除该数据吗', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(res => {
                console.log(res)
                this.deleteorganization.organization_id=id
                // 点击确定执行删除事件并提示
                this.deleteOrganization()
            })
        },
        // 删除本行数据事件
        deleteOrganization(){
            request("post","/Organization_Info/DeleteEntInfo",this.deleteorganization)
            .then(res=>{
                this.getOrganizationList()
                console.log(res)
                // 提示
                if(res.result==1){
                    this.$message({
                        type: 'success',
                        message: res.resultDesc,
                    });
                }
                else{
                    this.$message({
                        type: 'warning',
                        message: res.resultDesc,
                    });
                }
            })
            .catch(err =>{
                console.log(err)
            })
        },

        // 点击部门管理获得本行organization_id
        DepartmentDialog(id){
            this.departmentDialog=true
            this.f_organization_id=id
        },
        // 点击人员管理获得本行organization_id
        UserlistDialog(id){
            this.userlistDialog=true
            this.f_organization_id=id
        },

        // 分页的设置
        // 一页几条 10
        handleSizeChange(newSize){
            console.log(newSize)
            this.pageSize=newSize
        },
        // 点击设置第几页 1
        handleCurrentChange(newPage){
            console.log(newPage)
            this.pageIndex=newPage
        }
    }
}
</script>

<style scoped>
.el-card{
    height: 100%;
    margin-top: 20px;
    background-color: #F5F7FB;
}
/* 对话框 */
.el-form{
    padding-right:30px;
}
.el-form .el-form-item .el-input,.el-select{
    width: 100%;
}

.wrapper{
    padding: 40px 30px 20px;
    background-color: white;
}
/* 分页 */
.page{
    background-color: white;
}
.el-pagination{
    padding-top: 20px;
}

/* 搜索布局开始 */
.search{
    width: 100%;
    margin-bottom: 40px;
}
.search .el-button{
    color: #0846B9;
}
.search .search-up{
    margin-top: 20px;
    text-align: right;
}
.search-up>span{
    margin-right: 20px;
}
.search-down{
    background-color: white;
    /* margin-top: 20px; */
    margin-top: -20px;
    padding: 30px 130px;
    text-align: left;
}
.search-input{
    width: 400px;
}
.search-down-btn{
    margin: 20px 0px 0px 400px;
    width: 130px;
}
.i{
    text-align: right;
    margin-right: 90px;
}
.el-icon-caret-top{
    font-size: 50px;
    margin-top: -10px;
    color: white;
}
.el-table .el-table-column{
    text-align: center;
}
/* 表格操作列的链接的下划线设置 */
.el-table .el-button{
    /* text-decoration: underline; */
    color: #606266;
    padding-bottom: 1px;
    border-bottom: 1px solid;
    border-radius: 0px;
}

.el-dialog__header{
    background-color: burlywood;
}
</style>